import React from 'react';
import {connect} from 'dva';
import {Table, Row, Col, Form, Input, Icon, InputNumber, Radio, DatePicker, Select, Upload, Button} from 'antd';
import RightContacts from "../../../utils/RightConstants";
import Statement from '../../../components/statement/Statement';
import RightBox from "../../../components/commons/RightBox";
import OperatorConstant from "../../../utils/OperatorConstant";
import Constants from "../../../utils/Constants";
import EditStatement from './EditStatement';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const R = require('ramda');
const dateFormat = 'YYYY-MM-DD';
const { RangePicker } = DatePicker;


export default connect(({settlement, capital}) => ({settlement, capital}))(
    Form.create()(class settlementManage extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                open: false,
            }
        }

        componentDidMount() {
            this.props.dispatch({type: 'settlement/queryStatements', payload: { status: 2, page: Constants.DEFAULT_PAGE }});
        }

        handleAdd = () => {
            this.statement.handleOpen();
            this.props.dispatch({type: 'customerManage/queryCustomerManageList', payload: {status: 4 }});//查询供应商列表
        }


        handleCancel = (flag) => {
            if(flag){
                this.handleResetFields();
            }
            this.setState({ open: false});
        }


        onEdit = (record, type) => {
            if(OperatorConstant.view == type){
                this.props.dispatch({type: 'capital/getCurrentNodeDetail', payload: {id: record.id, code: "statement"}});
            }

            this.props.dispatch({type: 'settlement/getStatement', payload: {id: record.id}});
            if(this.editStatement)this.editStatement.handleOpen(type);
        };


        handleSearch = () => {
            let values = this.props.form.getFieldsValue();
            let newPage = this.props.settlement.page;
            newPage.page = 1;
            let time=values.time;


            this.props.dispatch({
                type: 'settlement/queryStatements',
                payload: {
                    stateno: values.stateno,
                    customerno: values.customerno,
                    minamount: values.minamount,
                    maxamount: values.maxamount,
                    stObj: values.stObj,
                    status: values.status,
                    beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                    endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                    page: newPage
                }
            });
        };


        onSuccess=()=>{
            this.handleSearch();
            this.handleCancel();
            this.handleResetFields();
        };


        columns = [
            {title: '供应商编码', dataIndex: 'companyCode', key: 'companyCode'},

            {title: '供应商名称', dataIndex: 'companyName', key: 'companyName'},

            {title: '结算单号', dataIndex: 'stateno', key: 'stateno'},

            {title: '结算金额(CNY)', dataIndex: 'transferamount', key: 'transferamount'},

            {title: '收款人', dataIndex: 'cc', key: 'cc',
                render: ()=>{
                    return "待转译"
                }
            },

            {title: '开户行', dataIndex: 'accopenbank', key: 'accopenbank'},

            {title: '银行账号', dataIndex: 'accno', key: 'accno'},

            {title: '申请人', dataIndex: 'creatorName', key: 'creatorName',
                render: ()=>{
                    return "待转译"
                }
            },

            {title: '创建时间', dataIndex: 'createtime', key: 'createtime'},

            {title: '操作',  key: 'key_oprator',
                render: (text, record, index) => {
                    return (
                        <span>
                        <a href="#" onClick={this.onEdit.bind(this, record, "view")}>查看</a>
                    </span>
                    );
                }
            }
        ];

        render () {
            let dataSouce = R.isNil(this.props.settlement.dataSource) ? {} : this.props.settlement.dataSource;
            let formItemLayout = {labelCol: {span: 6}, wrapperCol: {span: 18}};
            const { getFieldDecorator } = this.props.form;

            let values = this.props.form.getFieldsValue();
            let time=values.time;
            let pagination = {
                showTotal: total => `共 ${total} 条数据`,
                pageSize: this.props.settlement.page.size,
                total: this.props.settlement.page.totalRow,
                showSizeChanger: true,
                current: this.props.settlement.page.page,
                onShowSizeChange: (current, size) => {
                    let newPage = this.props.settlement.page;
                    newPage.size = size;
                    newPage.page = 1;
                    this.props.dispatch({
                        type: 'settlement/queryStatements',
                        payload: {
                            stateno: values.stateno,
                            customerno: values.customerno,
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            stObj: values.stObj,
                            status: values.status,
                            beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                            endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                            page: newPage
                        }
                    });
                },
                onChange: (pageNumber, pageSize) => {
                    let newPage = this.props.settlement.page;
                    newPage.page = pageNumber;
                    this.props.dispatch({
                        type: 'settlement/queryStatements',
                        payload: {
                            stateno: values.stateno,
                            customerno: values.customerno,
                            minamount: values.minamount,
                            maxamount: values.maxamount,
                            stObj: values.stObj,
                            status: values.status,
                            beginTime:R.isNil(time)||R.isEmpty(time)?null:time[0].format(dateFormat),
                            endTime:R.isNil(time)||R.isEmpty(time)?null:time[1].format(dateFormat),
                            page: newPage
                        }
                    });
                }
            }
            return (
                <div>
                    <Form >
                        <div style={{width: 1250}}>
                        <Row >
                            <Col span={8}>
                                <FormItem {...formItemLayout} label={'结算单号'}>
                                    {getFieldDecorator('stateno', {})(
                                        <Input style={{width: '80%'}}/>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={8}>
                                <FormItem  {...formItemLayout} label={'转账金额'}>
                                    {getFieldDecorator('minamount', {})(
                                        <InputNumber style={{width:'150px'}} placeholder="最小金额" />
                                    )}
                                </FormItem>
                            </Col>

                            <Col span={5} style={{marginLeft:'-190px'}}>
                                <FormItem {...formItemLayout} label={'至'} >
                                    {getFieldDecorator('maxamount', {})(
                                        <InputNumber style={{width:'150px'}}   placeholder="最大金额" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={8}><FormItem {...formItemLayout} label={'供应商编码'}>{getFieldDecorator('customerno')(<Input style={{width: '80%'}}/>)}</FormItem></Col>
                            <Col span={8}><FormItem {...formItemLayout} label={'结算对象'}>
                                {getFieldDecorator('stObj', {
                                        initialValue: ''
                                    })(
                                        <Select style={{width: '80%'}} disabled={this.props.disabled}>
                                            <Option value={"0"}>工厂供应商结算</Option>
                                            <Option value={"1"}>物流供应商结算</Option>
                                    </Select>
                                )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={8}>
                                <FormItem {...formItemLayout} label={'创建时间'}>
                                    {getFieldDecorator('time', {})(
                                        <RangePicker
                                            style={{width: '100%'}}
                                            showTime={{ format: 'YYYY-MM-DD' }}
                                            format="YYYY-MM-DD"
                                            placeholder={['开始时间', '结束时间']}
                                        />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>

                        <Row>
                            <Col span={8}>
                                <FormItem {...formItemLayout} label={'状态'}>
                                    {getFieldDecorator('status', {
                                        initialValue: "2"
                                    })(

                                        <RadioGroup style={{width: 800}}>
                                            <Radio value="">全部</Radio>
                                            <Radio value="2">待审核</Radio>
                                            <Radio value="3">审核失败</Radio>
                                            <Radio value="4">待付款</Radio>
                                            <Radio value="5">已付款</Radio>
                                            <Radio value='6'>付款失败</Radio>
                                        </RadioGroup>
                                    )}
                                </FormItem>
                            </Col>
                            <Col span={11} style={{float: 'right'}}>
                                <Button type="primary" icon="search" style={{marginRight: 5}} onClick={this.handleSearch.bind(this)}>查询</Button>
                                <RightBox resource={RightContacts.SETTLEMENT.SETTLEMENT_MANAGE_ADD}><Button type="primary" icon="plus" style={{marginRight: 5}} onClick={this.handleAdd.bind(this)}>添加结算单</Button></RightBox>

                            </Col>
                        </Row>
                        </div>
                    </Form>

                    <Table rowKey="id" dataSource={this.props.settlement.list} columns={this.columns} bordered={true} size={'middle'} pagination={pagination}/>

                    <Statement wrappedComponentRef={(inst) => this.statement = inst} dispatch={this.props.dispatch} />

                    <EditStatement wrappedComponentRef={(inst) => this.editStatement = inst}
                                   dispatch={this.props.dispatch}
                                   dataSource={this.props.settlement.dataSource}
                                   cstId={this.props.cstid}
                                   capital = {this.props.capital}
                    />

                </div>
            )
        }
    })


)
